<template>
  <div class="wrapper app-container" :class="{ ub: noData, 'ub-pc': noData }">
    <div class="empty" v-if="noData">
      <img src="@/assets/images/noData.png" class="img" />
      <div class="str1">安全内业资料</div>
      <div class="str2">还没有安全内业资料，请点击引用目录模板</div>
      <el-button type="primary" class="button" @click="openTemplateDialog">引用目录模板</el-button>
    </div>
    <SafeInfoDetail  v-else />
    <TemplateDialog :visible.sync="templateDialogVisible" v-if="templateDialogVisible" @chooseDone="chooseDone">
    </TemplateDialog>
  </div>
</template>
<script>
import TemplateDialog from "./components/templateDialog.vue";
import SafeInfoDetail from "./safeInfoDetail.vue"
import { getInforList, relateCatalog } from "./api"
import { mapState } from "vuex";
export default {
  name: "SafeInfo",
  components: { TemplateDialog, SafeInfoDetail },
  data() {
    return {
      noData: true,
      templateDialogVisible: false,
      projectId: this.$store.state.app.selectData,
    }
  },
  created() {
    if(this.projectId){
      this.getList();
    }
  },
  watch: {
    app: {
      handler(newVal, oldVal) {
        this.projectId = newVal.selectData;
        this.getList();
      },
      deep: true,
    },
  },
  computed: {
    ...mapState(["app"]),
  },
  methods: {
    async getList() {
      this.$common.showLoading();
      this.noData = true;
      const res = await getInforList(this.projectId);
      if (!res.data || !res.data.length) {
        this.noData = true;
      } else {
        this.noData = false;
      }
      this.$common.hideLoading();
    },
    setTemplate() {
      this.getCatalogList();
    },
    openTemplateDialog() {
      this.templateDialogVisible = true
    },
    async chooseDone(data) {
      const res = await relateCatalog({ projectId: this.projectId, catalogId: data.id })
      if (res.code == 200) {
        this.getList();
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  .empty {
    text-align: center;

    .img {
      width: 400px;
      height: 400px;
      margin-top: 100px;
    }

    .str1 {
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .str2 {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }

}
</style>